<!-- 登录页 -->
<template>
  <view class="login-container">
    <view class="status-bar"></view>
    <cover-view>登录</cover-view>
    <image class="logo" src="/static/logo.png"></image>
    <button :loading="loading" type="default" @click="handleLogin">登录</button>
  </view>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    ...mapActions({
      login: 'getTokenActions',
    }),
    // 登录
    async handleLogin() {
      this.loading = true;
      await this.login();
      this.$u.route({
        type: 'switchTab',
        url: '/pages/user/index',
      });
      this.loading = false;
    },
  },
};
</script>

<style lang="scss">
.login-container {
  text-align: center;
  padding: 0 20rpx;
  height: 100vh;
  background: #5098ff url('https://pics5.baidu.com/feed/77c6a7efce1b9d16160542fe766785858e5464b7.jpeg') no-repeat center center;
  background-size: cover;
  .status-bar {
    height: var(--status-bar-height);
    width: 100%;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx auto;
  }
}
</style>
